<template>
		<view class="pay">
			<view>支付密码</view>
			<input class="editInput" v-model="formData.paymentPassword" placeholder-class="placeholder" placeholder="请设置新的支付密码" />
		</view>
		<view class="paybutton" @click="paybuttonFn">提交</view>
		
		<uni-popup ref="popup" type="center"  >
		     <view class="popup">
					   <view class="popup_label">  请确定是否设置新的支付密码?</view>
					   <view  class="flex1 popup_button"> 
					      <view class="popup_button_item" @click="delPopupFn">取消</view>
					      <view class="popup_button_item" @click="setPayFn">提交</view>
					   </view>
				   </view>
		</uni-popup>
</template>

<script setup>
	import { computed ,ref,reactive,toRefs,onMounted} from 'vue';
	import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	 const popup = ref(null);
	 const formData=ref({
		 id:'',
		 paymentPassword:''
	 })
	 
	 
	const appuserInfo=ref({});
	 
	 
	 onLoad(()=>{
		 appuserInfo.value=sheep.$store('user').userInfo
		 formData.value.id=appuserInfo.value.id
		 console.log(formData.value.id);
	 })
	
	 //点击提交弹出询问弹框
	 const paybuttonFn=()=>{
		 if(formData.value.paymentPassword){
			 popup.value.open()
		 }else{
			 uni.showToast({
			 	title:'请输入新的支付密码',
				icon:'none'
			 })
		 }
	 }
	 //取消popup弹框
	 const delPopupFn=()=>{
	 	   popup.value.close()
	 }
	 //提交
	 const setPayFn=()=>{
		 sheep.$api.login.setPayment(formData.value).then(res=>{
			 console.log(res);
			 if(res.code==200){
				 //修改成功
				 uni.showToast({
				 	title:'设置成功！',
				 	icon:'success'
				 })
				 
				 setTimeout(()=>{
					 delPopupFn()
					 sheep.$store('user').getUserInfo()
					 uni.navigateBack({delta:1})
				 },800)
				 
			 }else{
				 uni.showToast({
				 	title:'当前出现问题，请重新设置',
				 	icon:'none'
				 })
			 }
		 })
	 }
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.flex1{
		display: flex;
	}
	.pay{
		display: flex;
		align-items: center;
		margin-top: 100rpx;
		padding: 0 50rpx;
	}
	.editInput{
		border-bottom: 2rpx solid #eee;
		padding: 10rpx 30rpx;
		margin-left: 20rpx;
		
	}
	.placeholder{
		font-size: 26rpx;
	}
		
	.paybutton{
		text-align: center;
		color:#fff;
		margin:100rpx 40rpx;
		padding:20rpx ;
		border-radius: 10rpx;
		background-image: linear-gradient(90deg,#f892a9,#f8a3b6,#f8b7c7,#f8c9d5,#f8d2db);
	}
	//检查是否设置支付密码
	.popup{
		width: 500rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top:40rpx ;
		.popup_label{
			text-indent:1.5em;
			padding:0 30rpx ;
			font-size: 28rpx;
		}
		.popup_button{
			margin-top: 20rpx;
			border-top: 2rpx solid #eee;
			.popup_button_item{
				width:50%;
				text-align: center;
				padding: 20rpx 0;
			}
			.popup_button_item:first-child{
				border-right: 2rpx solid #eee;
			}
			.popup_button_item:last-child{
				color:#f8b2c3;
			}
		}
	}
</style>